var createOneMovieItem = function(i, item) {
	var counter = i + 1;
	var mainDiv = document.createElement('div');
	mainDiv.className = 'panel panel-default';

	var divHeading = document.createElement('div');
	divHeading.className = 'panel-heading';

	var heading = document.createElement('h4');
	heading.className = 'panel-title';

	var collapseToggler = document.createElement('a');
	collapseToggler.innerHTML = item.titel;

	var attributeOne = document.createAttribute('data-toggle');
	attributeOne.value = 'collapse';
	collapseToggler.setAttributeNode(attributeOne);

	var attributeTwo = document.createAttribute('data-parent');
	attributeTwo.value = '#accordion';
	collapseToggler.setAttributeNode(attributeTwo);

	var attributeThree = document.createAttribute('href');
	attributeThree.value = '#collapse' + counter;
	collapseToggler.setAttributeNode(attributeThree);

	var divCollapse = document.createElement('div');
	divCollapse.id = 'collapse' + counter;
	divCollapse.className = 'panel-collapse collapse in';

	var divBody = document.createElement('div');
	divBody.className = 'panel-body';

	buildMovieInfo(i, item, divBody);
	
	heading.appendChild(collapseToggler);
	divHeading.appendChild(heading);

	divCollapse.appendChild(divBody);

	mainDiv.appendChild(divHeading);
	mainDiv.appendChild(divCollapse);

	document.getElementById('accordion-home').appendChild(mainDiv);
	
	/*
	-------------------
	What it looks like:
	-------------------
	<div class="panel panel-default">
    	<div class="panel-heading">
        	<h4 class="panel-title">
            	<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Movie title</a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
        	<div class="panel-body">
                inner HTML
        	</div>
    	</div>
    </div>
	*/

};

var posterUrl = new Object();

var buildMovieInfo = function(i, item, parentDiv) {
	var infoDiv = document.createElement('div');
	infoDiv.className = 'col-xs-6 col-md-4';

	var titleHeading = document.createElement('h2');
	titleHeading.innerHTML = item.titel;
	
	getAvgRatingForMovie(titleHeading, item.imdbtt);
	
	infoDiv.appendChild(titleHeading);
	var starsDiv = document.createElement('div');
	starsDiv.className = 'rateit';

	appendRating(i, infoDiv, item.imdbtt);

	var descriptionDiv = document.createElement('div');
	descriptionDiv.className = 'col-xs-6 col-md-4';
	descriptionDiv.innerHTML = item.description;

	var posterDiv = document.createElement('div');
	posterDiv.className = 'col-xs-6 col-md-4';

	var thumpDiv = document.createElement('a');
	thumpDiv.className = 'thumpnail';

	var posterImg = document.createElement('img');
	posterImg.className = 'img-rounded img-responsive';

	var posterSrc = document.createAttribute('src');
	posterSrc.value = posterUrl;
	posterImg.setAttributeNode(posterSrc);
	$.when(getPoster(item.imdbtt)).done(function() {
		posterSrc.value = posterUrl;
		posterImg.setAttributeNode(posterSrc);
	});
	
	var posterWidth = document.createAttribute('width');
	posterWidth.value = '100px';
	posterImg.setAttributeNode(posterWidth);

	var posterAlt = document.createAttribute('alt');
	posterAlt.value = item.titel;
	posterImg.setAttributeNode(posterAlt);

	thumpDiv.appendChild(posterImg);
	posterDiv.appendChild(thumpDiv);

	parentDiv.appendChild(infoDiv);
	parentDiv.appendChild(descriptionDiv);
	parentDiv.appendChild(posterDiv);
	if (localStorage.getItem('access-token') !== null) {
		checkForOwnRatings(parentDiv);
	}
	/*
	-------------------
	What it looks like:
	-------------------
	<div class="col-xs-6 col-md-4">
		<h2>The Shawshank Redemption</h2>
		Rating div -> builds in appendRating
	</div>
	<div class="col-xs-6 col-md-4"> info
	</div>
  	<div class="col-xs-6 col-md-4">
    	<a class="thumbnail">
      		<img src="img url" width="100px" alt="Shaw" class="img-rounded img-responsive">
    	</a>
  	</div>
	*/
};

var getPoster = function (imdbtt) {
	return $.ajax({
		type : 'GET',
		url : 'http://www.omdbapi.com/?i=tt' + imdbtt,
		dataType : 'json'
	}).fail(function(jgXHR, textStatus) {
		alert(jgXHR.status + ': ' + textStatus);
	}).success(function(data, textStatus, request) {
		posterUrl = data.Poster;
	});
};

var appendRating = function(iterator, parentDiv, imdb) {
	var accessToken = localStorage.getItem('access-token');
	if (accessToken !== null) {
		var br = document.createElement('br');
	
		var divContainer = document.createElement('div');
		divContainer.id = imdb;
		
		divContainer.appendChild(br);
	
		for(i = 1; i <= 10; i++) {
			var label = document.createElement('label');
			label.className = 'radio-inline';
			label.id = 'inlineRadio' + i;
		
			var input = document.createElement('input');
			input.name = 'rateBox' + iterator;
			var typeAttr = document.createAttribute('type');
			typeAttr.value = 'radio';
			input.setAttributeNode(typeAttr);

			var valueAttr = document.createAttribute('value');
			valueAttr.value = '' + (i/2);
			input.setAttributeNode(valueAttr);
			
			var innerTextForLabel = document.createElement('div');
			innerTextForLabel.id = 'innerText';
			innerTextForLabel.innerHTML = '' + (i/2);
			
			label.appendChild(input);
			label.appendChild(innerTextForLabel);
			divContainer.appendChild(label);
		}
		var delButton = document.createElement('button');
		delButton.id = 'del-button' + iterator.toString();
		delButton.type = 'button';
		delButton.className = 'btn btn-danger';
		delButton.innerHTML = 'Delete rating';
		
		var rateButton = document.createElement('button');
		rateButton.id = 'rate-button' + iterator.toString();
		rateButton.type = 'button';
		rateButton.className = 'btn btn-success';
		rateButton.innerHTML = 'Rate it!';
		
		divContainer.appendChild(br);
		divContainer.appendChild(delButton);
		divContainer.appendChild(rateButton);

		parentDiv.appendChild(divContainer);
		//add rate click event listener after everything is appended
		delButton.onclick = handleRateDelEvent;
		rateButton.onclick = handleRateClickEvent;
	}
	/*
	  	-------------------
		What it looks like:
		-------------------
	  	<div id= movie imdb>
	 		<br>
			<label class="radio-inline">
  				<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option0.5"> 0.5
			</label>
			...
			<label class="radio-inline">
  				<input type="radio" name="inlineRadioOptions" id="inlineRadio10" value="option5"> 5
			</label>
			<br>
			<button type="button" class="btn btn-success">Rate it!</button>
		</div>
	 */
};

var handleRateDelEvent = function() {
	var parentContainer = this.parentNode;
	var ratingId = parentContainer.getAttribute('ratingid');

	if(!ratingId) {
		alert('There is no rating to delete!');
	} else {
		var radioBtns = parentContainer.getElementsByTagName('input');
		deleteRating(ratingId);
	}
};

var handleRateClickEvent = function() {
	var parentContainer = this.parentNode,
	    radioBtns = parentContainer.getElementsByTagName('input');
		ratingId = parentContainer.getAttribute('ratingid');
	
	var somethingClicked = false;
	for(var i=0; i<radioBtns.length; i++) {
		if(radioBtns[i].checked) {
			somethingClicked = true;
			if(!ratingId) {
				makeNewRating(parentContainer.id, radioBtns[i].value);
			} else {
				sendRatingUpdate(radioBtns[i].value, parentContainer.getAttribute('ratingid'));
			}
			break;
		}
	}
	
	if(!somethingClicked) {
		alert('First rate this movie before submitting!');
	}
};